<template>
	<view>
		<view class="" v-if="tabCurrent===1">
			<index></index>
		</view>
		<view class="" v-if="tabCurrent===2">
			<server></server>
		</view>
		<view class="" v-if="tabCurrent===3">
			<an></an>
		</view>
		<view class="" v-if="tabCurrent===4">
			<my></my>
		</view>
		<view class="line">
			
		</view>
		<view class="tab">
			<view class="sub-tab" @tap="changeTab(1)" :class="tabCurrent===1?'active':''">
				<image src="../../static/lawer/l_index1.png" v-if="tabCurrent===1"></image>
				<image src="../../static/lawer/l_index.png" v-else></image>
				<view class="">
					首页
				</view>
			</view>
			<view class="sub-tab" @tap="changeTab(2)" :class="tabCurrent===2?'active':''">
				<image src="../../static/lawer/l_server1.png" v-if="tabCurrent===2"></image>
				<image src="../../static/lawer/l_server.png" v-else></image>
				<view class="">
					服务
				</view>
			</view>
			<view class="sub-tab" @tap="changeTab(3)" :class="tabCurrent===3?'active':''">
				<image src="../../static/lawer/l_an1.png" v-if="tabCurrent===3"></image>
				<image src="../../static/lawer/l_an.png" v-else></image>
				<view class="">
					接案
				</view>
			</view>
			<view class="sub-tab" @tap="changeTab(4)" :class="tabCurrent===4?'active':''">
				<image src="../../static/lawer/l_my1.png" v-if="tabCurrent===4"></image>
				<image src="../../static/lawer/l_my.png" v-else></image>
				<view class="">
					我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import my from "./my.vue"
	import an from "./an.vue"
	import server from "./server.vue"
	import index from "./index.vue"
export default {
	data() {
		return {
			tabCurrent:1
		}
	},
	methods: {
		changeTab(tab){
			this.tabCurrent=tab
		}
	},
	components:{
		my,
		an,
		server,
		index
	}
}
</script>

<style lang="scss" scoped>
.line{
	width: 100%;
	height: 120rpx;
}
.tab{
	display: flex;
	justify-content: space-around;
	background-color: #FFFFFF;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	border-top: #ccc solid 1rpx;
	.sub-tab{
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		color: #ccc;
		image{
			height: 55rpx;
			width:66rpx;
		}
	}
	.active{
		color: #069FF6;
	}
}

</style>
